"use client";
import { FC, PropsWithChildren } from "react";
import { useRouter } from "@/i18n";
// import ButtonOwn from "@/components/ButtonOwn";
import './page.scss'

interface Props {}

const Profile: FC<PropsWithChildren<Props>> = (props) => {
    // let [amount, setAmount] = React.useState(0)
    let amount = 50
    let amountList = [10,20,50,100,200,500,1000,5000,10000,500,1000,5000,10000]

    const router = useRouter();
    const goPage = (path = '/') => {
        router.push(path)
    }

    return (
        <div className="main">
            <div className="userContent">
                <div className="userInfo">
                    <div>
                        <div className="bgImg"></div>
                        <div>
                            <span>Conta</span>
                            <span className="phone">5516982013895</span>
                        </div>
                    </div>
                    <div className="goto" onClick={() => goPage('/login')}>
                        <span>Login</span>
                        <span className="iconfont icon-xiangzuo1"></span>
                    </div>
                </div>
                <div className="coin">
                    <div>
                        <span className="iconfont icon-wallet"></span>
                        <div>
                            <span> Saldo </span>
                            <div className="num">
                                <span className="uppercase">brl </span>
                                <span>0.00</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <span className="iconfont icon-gift2"></span>
                        <div>
                            <span> Bônus </span>
                            <div className="num">
                                <span className="uppercase">brl </span>
                                <span>0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="link">
                <span  onClick={() => goPage('/deposit')}>Depósito</span>
                <span  onClick={() => goPage('/withdraw')}>Sacar</span>
                {/* <ButtonOwn active={true}>Depósito</ButtonOwn>
                <ButtonOwn active={true}>Sacar</ButtonOwn> */}
            </div>

            <ul>
                {
                    amountList.map((item, index) => (
                        <li className={index==0?'free':''} key={index}>
                            <div className="content"> Afiliado - Ganhe R$ 10.000 por dia | 9F.COM 
                                <span data-v-5c42ece6="" className="iconfont icon-hot"></span>
                                <div data-v-5c42ece6=""></div>
                            </div>
                            <div><span className="iconfont icon-xiangyou1"></span></div>
                        </li>
                    ))
                }
            </ul>

            <span className="logOut" onClick={() => goPage('/login')}>Login</span>
        </div>
    );
};

export default Profile;